<%@ page import="com.po.chat" %>
<%@ page import="java.util.Stack" %>
<%@ page import="com.po.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isErrorPage="true" %>
<%
    Stack<chat> friendChat = (Stack<chat>) request.getAttribute("friendChat");
    User user = (User) request.getAttribute("user");
%>
<a href="<%=request.getContextPath()%>/myFriends">返回好友列表</a>
<title>聊天</title>
<br><br><br>
<div style="text-align: center">
    <h3><%=user.getName()%>
    </h3>
</div>
<div class="wrap">
    <div class="nrl">
        <ul class="lt" style="padding: 15px;" id="lt">
            <%
                for (chat c : friendChat) {
                    if (c.getWho() == 1) {
            %>
            <li style="text-align: right">
                <span style="background: rgb(152,255,101)"><%=c.getChatContent()%></span><i></i>
            </li>
            <%
            } else {
            %>
            <li>
                <i></i><span style="background: rgb(152,255,101)"><%=c.getChatContent()%></span>
            </li>
            <%
                    }
                }
            %>
        </ul>
    </div>

    <div class="nr2">
        <form action="<%=request.getContextPath()%>/sendMessage?user_id=<%=user.getId()%>" method="post" >
        <input type="text" id="content" name="content">
        <input type="submit" value="发送">
        </form>
    </div>
</div>

<style>
    .wrap {
        width: 400px;
        height: 470px;
        margin: 20px auto;
        border: 2px solid #ddd;
    }

    .nrl {
        overflow-y: auto;
        width: 370px;
        height: 400px;
        border: 2px solid #ddd;
        margin: 10px auto;
        background-image: url("../picture/new.jpg");
        background-size: cover;
    }

    input {
        width: 200px;
        height: 30px;
        color: #495057;
        border-radius: 5px;
    }

    button {
        width: 60px;
        height: 32px;
        vertical-align: middle;
        margin-left: 5px;
        border-radius: .25rem;
        color: #28a745;
        border: 1px solid #28a745;
        background: transparent;
        font-size: 1rem;
    }

    .lt {
        padding-left: -40px;
    }

    .lt li {
        list-style: none;
        padding: 10px 0;
    }

    .lt span {
        display: inline-block;
        padding: 0 15px;
        margin: 0 10px 0;
        font-size: 18px;
        font-weight: normal;
        border-radius: 8px;
        line-height: 40px;
        max-width: 170px;
        word-wrap: break-word;
        text-align: left;
    }

    i {
        vertical-align: top;
        font-weight: normal;
        font-size: 17px;
    }

    body{
        background-image: url("../picture/chatBackground.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        background-size: 100% 100%;
    }
</style>


